<nav class="navbar navbar-inverse"
        role="navigation"
        ng-controller="NavbarCtrl">

  <div class="container">
    <div class="navbar-header">
        <button type="button"
                    class="navbar-toggle"
                    ng-init="navCollapsed = true"
                    ng-click="navCollapsed = !navCollapsed">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
      <a class="navbar-brandi" ui-sref="main">
        <img class="navbar-logo"
                alt="BestDressed"
                src="assets/images/logo1.png">
      </a>
    </div>

    <div class="navbar-collapse collapse" ng-class="{'in':!navCollapsed}">

      <ul class="nav navbar-nav navbar-left">
        <li ng-show="isLoggedIn()" ng-class="{active: isActive('/main')}">
         <a ui-sref="main">Home</a></li>

        <li ng-show="isAdmin()" ng-class="{active: isActive('/admin')}">
        <a ui-sref="admin">Admin</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right" >
        <li ng-hide="isLoggedIn()" ng-class="{active: isActive('/signup')}">
        <a ui-sref="signup" id="nav-internal">Sign up</a></li>

        <li ng-hide="isLoggedIn()" ng-class="{active: isActive('/login')}">
        <a ui-sref="login" id="nav-internal">Login</a></li>

        <li ng-show="isLoggedIn()">
        <p class="navbar-text">Hello {{ getCurrentUser().name }}</p> </li>

        <li ng-show="isLoggedIn()" ng-class="{active: isActive('/settings')}">
        <a href="/settings"><span class="glyphicon glyphicon-cog"></span></a></li>

        <li ng-show="isLoggedIn()" ng-class="{active: isActive('/logout')}">
        <a href="" ng-click="logout()">Logout</a></li>

      </ul>
    </div>
  </div>
</div>
